<template>
    <view>
        <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }" :data-source="data">
            <template #renderItem="{ item }">
                <a-list-item>
                    <a-card @contextmenu="rightClick($event,item)" :bordered="false" hoverable  v-on:dblclick="clickAlert()">
                        <template #cover>
                            <img alt="example" src="/images/disk/dir.png" />
                        </template>
                        <a-card-meta title="Europe Street beat">
                            <template #description>www.instagram.com</template>
                        </a-card-meta>
                    </a-card>
                </a-list-item>
            </template>
        </a-list>
        <vue3-menus :open="isOpen" :event="eventVal" :menus="menus.menus">
            <template #icon="{ menu, activeIndex, index }">{{ activeIndex }}</template>
            <template #label="{ menu, activeIndex, index }">{{ menu.label }}</template>
        </vue3-menus>
    </view>
</template>
<script setup>
import { Vue3Menus } from 'vue3-menus';
const isOpen = ref(false);
const eventVal = ref({});
function rightClick(event,item) {
    isOpen.value = false;
    //console.log(item)
    nextTick(() => {
        eventVal.value = event;
        isOpen.value = true;
    })
    event.preventDefault();
}
const menus = shallowRef({
    menus: [
        {
            label: "返回(B)",
            tip: 'Alt+向左箭头',
            click: () => {
                window.history.back(-1);
            }
        },
        {
            label: "点击不关闭菜单",
            tip: '不关闭菜单',
            click: () => {
                return false;
            }
        },
        {
            label: "前进(F)",
            tip: 'Alt+向右箭头',
            disabled: true
        },
        {
            label: "重新加载(R)",
            tip: 'Ctrl+R',
            click: () => location.reload(),
            divided: true
        },
        {
            label: "另存为(A)...",
            tip: 'Ctrl+S'
        },
        {
            label: "打印(P)...",
            tip: 'Ctrl+P',
            click: () => window.print(),
        },
        {
            label: "投射(C)...",
            divided: true
        },
        {
            label: '发送到你的设备',
            children: [
                {
                    label: 'iPhone',
                },
                {
                    label: 'iPad'
                },
                {
                    label: 'Windows 11'
                }
            ]
        },
        {
            label: "为此页面创建二维码",
            divided: true,
        },
        {
            label: "使用网页翻译(F)",
            divided: true,
            children: [
                { label: "翻译成繁体中文" },
                { label: "翻译成繁体中文" },
                {
                    label: "百度翻译", children: [
                        { label: "翻译成繁体中文" },
                        { label: "翻译成繁体中文" },]
                },
                {
                    label: "搜狗翻译", children: [
                        { label: "翻译成繁体中文" },
                        { label: "翻译成繁体中文" },
                    ]
                },
                {
                    label: "有道翻译", children: [
                        { label: "翻译成繁体中文" },
                        { label: "翻译成繁体中文" },
                    ]
                },
            ]
        },
        {
            label: "截取网页(R)"
        },
        { label: "查看网页源代码(U)", tip: 'Ctrl+U' },
        { label: "检查(N)", tip: 'Ctrl+Shift+I' }
    ]
})
const data = ref([
    {
        title: 'Title 1',
    },
    {
        title: 'Title 2',
    },
    {
        title: 'Title 3',
    },
    {
        title: 'Title 4',
    },
    {
        title: 'Title 5',
    },
    {
        title: 'Title 6',
    },
])

function clickAlert() {
    alert("一个弹窗")
    // var el = document.getElementById('el')
    // el.ondblclick = function(){
    //     alert("一个弹窗")
    // }  
}
</script>